<template>
  <el-dialog
    title="订单详情"
    width="550px"
    top="8vh"
    :visible.sync="dialogVisible"
  >
    <div class="detail-wrap">
      <div class="item">
        <div class="label">订单状态：</div>
        <div class="value">
          <el-tag size="small" :type="ORDER_TAG_STATUS[row.status]">
            {{ ORDER_STATUS[row.status] }}
          </el-tag>
        </div>
      </div>
      <div class="item">
        <div class="label">订单名称：</div>
        <div class="value">{{ row.orderName }}</div>
      </div>
      <div class="item">
        <div class="label">订单备注：</div>
        <div class="value">{{ row.description || "暂无备注" }}</div>
      </div>
      <div class="item">
        <div class="label">订单编号：</div>
        <div class="value">{{ row.id }}</div>
      </div>
      <div class="item">
        <div class="label">创建时间：</div>
        <div class="value">{{ row.createdTime }}</div>
      </div>
      <div class="item">
        <div class="label">更新时间：</div>
        <div class="value">{{ row.updatedTime }}</div>
      </div>
      <div class="item">
        <div class="label">创建人：</div>
        <div class="value">{{ row.creatorName }}</div>
      </div>
      <div class="item" v-if="row.quotationCreatorName">
        <div class="label">报价人：</div>
        <div class="value">{{ row.quotationCreatorName }}</div>
      </div>
      <div class="item" v-if="row.inoutCreatorName">
        <div class="label">出库人：</div>
        <div class="value">{{ row.inoutCreatorName }}</div>
      </div>
      <div class="item" v-if="row.fee">
        <div class="label">路费：</div>
        <div class="value">{{ row.fee }}</div>
      </div>
      <div class="item align-start">
        <div class="label">门店平面图：</div>
        <div class="value">
          <el-image
            v-for="(item, index) in storeImgList"
            :key="item + index"
            style="width: 100px; height: 100px; margin: 0 5px 5px 0"
            :src="item"
            :preview-src-list="storeImgList"
            fit="cover"
          ></el-image>
        </div>
      </div>
      <div class="item">
        <div class="label">出库单：</div>
        <div class="value">
          <el-button @click="preview" size="small" type="primary"
            >预览出库单</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { ORDER_TAG_STATUS, ORDER_STATUS } from "@js/params";
import { LOGIN_PATH } from "@/assets/js/define";
import { mapState } from "vuex";
export default {
  data() {
    return {
      quoteDosage: "",
      modify: "detail",
      dialogVisible: false,
      ORDER_STATUS,
      ORDER_TAG_STATUS,
      row: {},
      quoteList: [],
      emptyUrl:
        "https://front-xps-cdn.xsyx.xyz/custom/stock-c/h5/prod_none.png",
    };
  },
  computed: {
    ...mapState(["tokenv3"]),
    totalSalePrice() {
      const { quoteMap } = this;
      const { add, mul } = this.$acc;
      return Object.values(quoteMap)
        .map((e) => mul(e.dosageNum || 0, e.salePrice || 0))
        .reduce((a, b) => add(a, b), 0);
    },
    quoteMap() {
      const { quoteDosage } = this;
      let map = {};
      try {
        map = JSON.parse(quoteDosage);
      } catch (e) {}
      return map;
    },
    storeImgList() {
      let { storeImgs = "" } = this.row;
      return storeImgs.split(",").map((e) => `${this.$imgHost}${e}`);
    },
    totalClassify() {
      return [...new Set(this.quoteList.map((e) => e.directoryId))].length;
    },
    totalQty() {
      return this.quoteList.reduce((pre, next) => pre + (next.qty || 0), 0);
    },
    totalPrice() {
      return this.quoteList.reduce(
        (pre, next) => pre + (next.qty || 0) * (next.price || 0),
        0
      );
    },
    exPrice() {
      return this.quoteList
        .filter((e) => e.directoryName === "路费")
        .reduce((pre, next) => pre + (next.qty || 0) * (next.price || 0), 0);
    },
    quoteListMap() {
      const map = {};
      const { quoteList } = this;
      quoteList.forEach((item) => {
        const cur = {
          directoryId: item?.directoryId || "",
          directoryName: item?.directoryName || "",
          arr: [],
        };
        map[item.directoryId] = map[item.directoryId] || cur;
        map[item.directoryId].arr.push(item);
      });
      return map;
    },
    newTotalQty() {
      let res = 0;
      const { quoteListMap: map, quoteMap } = this;
      for (const k in map) {
        if (Object.hasOwnProperty.call(map, k)) {
          const item = map[k];
          res += item.arr.reduce(
            (a, b) => a + b.qty * (quoteMap[item.directoryId]?.dosageNum || 0),
            0
          );
        }
      }
      return res;
    },
  },
  watch: {},
  methods: {
    preview() {
      const { id } = this.row;
      let url = `${LOGIN_PATH}#/quoteExport?type=preview&id=${id}&token=${this.tokenv3}`;
      window.open(url, "_blank", "height=667 ,width=375,top=200,left=400");
    },
    showDialog(modify = "detail", row = {}) {
      this.dialogVisible = true;
      this.row = row;
      this.modify = modify || "detail";
      // this.getQuotation(row.id);
    },
    getQuotation(id) {
      if (id) {
        this.$api.orderDetail({ id }).then((res) => {
          this.quoteDosage = res.quoteDosage || "";
        });
        this.$api
          .getOrderQuotation({
            id,
          })
          .then((res) => {
            this.quoteList = (res || []).map((e) => {
              const material = e.material || {};
              const directory = e.directory || {};
              return {
                ...material,
                directoryId: directory?.id || "",
                directoryName: directory?.name || "",
                q_id: e.id,
                q_count: e.count,
                qty: e.count,
                orderId: e.orderId,
              };
            });
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.detail-wrap {
  max-height: 70vh;
  overflow-y: auto;
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    &.align-start {
      align-items: flex-start;
    }
    .label {
      font-size: 14px;
      font-weight: bold;
      color: #666;
      width: 90px;
      text-align: right;
    }
    .value {
      flex: 1;
      overflow: hidden;
      word-break: break-all;
      white-space: pre-wrap;
    }
  }
  .total-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 20px;
    .p1 {
      padding-right: 25px;
    }
  }
  .quote-item {
    padding-left: 20px;
    margin-bottom: 20px;
    .quote-title {
      font-size: 14px;
      font-weight: bold;
      color: #666;
      position: relative;
      @size: 8px;
      &::before {
        display: inline-block;
        content: "";
        position: absolute;
        width: @size;
        height: @size;
        background: #409eff;
        border-radius: 50%;
        left: -15px;
        top: 50%;
        margin-top: -4px;
      }
    }
    .quote {
      padding-left: 20px;
      display: flex;
      margin-top: 15px;
      .info {
        flex: 1;
        overflow: hidden;
        padding-left: 15px;
        span {
          margin-right: 8px;
        }
        .price {
          margin-right: 20px;
          color: #e6a23c;
        }
        .infoname {
          font-weight: bold;
          color: #666;
        }
        .infotip {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
